<template>
	<view class="container">
		<view class="tisbox">请认真填写信息方便确认</view>
		<form @submit="formSubmit" @reset="formReset">
			<view class="mapform">
				<view class="mapform_dl">
					<view class="mapform_dt">姓名：</view>
					<view class="mapform_dd"><input class="inp" type="text" @input="iname" :value="name"
							placeholder="请输入姓名" /></view>
					<view class="form_rbtn" @click="select">选择预约人</view>
				</view>
				<view class="mapform_dl">
					<view class="mapform_dt">联系电话：</view>
					<view class="mapform_dd"><input class="inp" type="text" @input="imobile" :value="mobile"
							placeholder="请输入联系电话" /></view>
				</view>
				<!-- <view class="mapform_dl">
					<view class="mapform_dt">邮箱：</view>
					<view class="mapform_dd"><input class="inp" type="text" @input="iemail" :value="email"
							placeholder="请输入邮箱" /></view>
				</view> -->
				<view class="mapform_dl">
					<view class="mapform_dt">公司名：</view>
					<view class="mapform_dd"><input class="inp" type="text" @input="icompanyname" :value="companyname"
							placeholder="请输入公司名" /></view>
				</view>
				<view class="mapform_dl">
					<view class="mapform_dt">参加人数：</view>
					<view class="mapform_dd"><input class="inp" type="number" @input="ipersons" :value="persons"
							placeholder="请输入参加人数" /></view>
				</view>
				<!-- <view class="mapform_dl">
					<view class="mapform_dt">性别：</view>
					<view class="mapform_dd">
						<picker @change="bindPickerChange1" :value="index1" :range="array1" range-key="name">
							<view class="picker">{{array1[index1].name}}</view>
						</picker>
						<view class="mapform_ico"></view>
					</view>
				</view>
				<view class="mapform_dl">
					<view class="mapform_dt">出生日期：</view>
					<view class="mapform_dd">
						<picker mode="date" value="date" start="1950-01-01" end="2030-09-01" @change="bindDateChange">
							<view class="picker">{{date}}</view>
						</picker>
						<view class="mapform_ico"></view>
					</view>
				</view> -->
			</view>
			<view class="mapform mgt20">
				<!-- <view class="mapform_dl">
					<view class="mapform_dt">就诊门店：</view>
					<view class="mapform_dd">
						<view class="picker">{{row.yiyuan}}</view> -->
						<!--<picker @change="bindPickerChange2" :value="index2" :range="mendian" range-key="name">
							<view class="picker">{{index2===""?'请选择门店':mendian[index2].name}}</view>
						</picker>-->
						<!-- <view class="mapform_ico"></view>
					</view>
				</view> -->
				<view class="mapform_dl">
					<view class="mapform_dt">预约类型：</view>
					<view class="mapform_dd">
						<view class="picker">{{doctorname}}</view>
						<view class="mapform_ico"></view>
					</view>
				</view>
				<!-- <view class="mapform_dl" v-if="row.price>0">
					<view class="mapform_dt">预约价格：</view>
					<view class="mapform_dd">
						<view class="picker">{{row.price}}</view>
						<view class="mapform_ico"></view>
					</view>
				</view> -->
				<view class="mapform_dl" v-if="pbdate">
					<view class="mapform_dt">预约日期：</view>
					<view class="mapform_dd">
						<view class="picker">{{pbdate}}</view>
						<view class="mapform_ico"></view>
					</view>
				</view>
				<view class="mapform_dl" v-if="pbdate">
					<view class="mapform_dt">预约时段：</view>
					<view class="mapform_dd">
						<view class="picker">{{pbtimes}}</view>
						<view class="mapform_ico"></view>
					</view>
				</view>
				<view class="mapform_dl" v-if="!date">
					<view class="mapform_dt">预约时间：</view>
					<view class="mapform_dd">
						<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex"
							:range="multiArray">
							<view class="picker">
								<text>{{multiArray[0][multiIndex[0]]}}</text><text>{{multiArray[1][multiIndex[1]]}}</text>
							</view>
						</picker>
						<view class="mapform_ico"></view>
					</view>
				</view>
				<!-- <view class="mapform_dl">
					<view class="mapform_dt">预约项目：</view>
					<view class="mapform_dd">
						<picker @change="bindPickerChange3" :value="index3" :range="cates" range-key="name">
							<view class="picker">{{index3===''?'请选择':cates[index3].name}}</view>
						</picker>
						<view class="mapform_ico"></view>
					</view>
				</view> -->
			</view>
			<view class="mapform mgt20">
				<view class="mapform_dt">主题：</view>
				<textarea class="viptextarea" @input="idesc" placeholder="请描述主题..." />
			</view>
			<view class="formbottom" @click="save">
				<view class="formbtn">立即预约</view>
			</view>
		</form>
	</view>
</template>

<script>
	import API from "@/common/api.js";
	//#ifdef WEB
	import jweixin from 'weixin-js-sdk'
	//#endif
	export default {
		data() {
			return {
				issend: true,
				mobile: "",
				doctorid: 0,
				doctorname: "",
				jzrid: 0,
				name: "",
				mobile: "",
				iemail: "",
				companyname: "",
				persons: "",
				sex: "",
				birthday: "",
				mendian: [],
				cates: [],
				desc: "",
				row: [],
				array1: [{
					name: '男'
				}, {
					name: '女'
				}],
				index1: 0,

				index2: '',

				index3: "",
				date: '请选择',

				multiArray: [
					[],
					['上午', '下午'],
				],
				multiIndex: [0, 0],
				pbdate: "",
				pbtimes: "",
			}
		},
		onLoad(options) {
			console.log(options);
			console.log('options');
			uni.$on('addUserInfo', res => {
				this.name = res.name
				this.mobile = res.mobile
				this.email = res.email
				this.jzrid = res.id
				if (res.sex == "女") {
					this.index1 = 1;
				} else {
					this.index1 = 0
				}
				this.date = res.birthday
			})
			var $this = this
			this.doctorname = options.name
			this.doctorid = options.id
			this.pbdate = options.date
			this.pbtimes = options.times
			this.persons = options.persons
			this.companyname = options.companyname
			API.post("doctor/doctorDetail", {
				id: options.id,
				isshop: API.isshop,
				shopid: options.shopid
			}).then((res) => {
				if (res.code == 1) {
					$this.row = res.data
				}
			})
			/*API.post("common/getshops").then((res) => {
				if (res.code == 1) {
					$this.mendian = res.data
				}
			})*/
			API.post("common/yuyuedays").then((res) => {
				if (res.code == 1) {
					$this.multiArray[0] = res.data
				}
			})
			API.post("product/getCates").then((res) => {
				if (res.code == 1) {
					$this.cates = res.data
				}
			})
		},
		onUnload() {
			uni.$off('addUserInfo')
		},
		methods: {
			save() {
				var $this = this
				if (!this.name) {
					API.showToast("请输入姓名")
				} else if (!(/^1[3456789]\d{9}$/.test(this.mobile))) {
					API.showToast("请输入手机号")
				} else if (!this.companyname) {
					API.showToast("请输入公司名")
				} else if (!this.persons) {
					API.showToast("请输入参加人数")
				}
				//  else if (!this.date) {
				// 	API.showToast("请选择出生日期")
				// } else if (this.index3 === "") {
				// 	API.showToast("请选择预约项目")
				// } 
				else {
					var pbdate = "",
						pbtimes = ""
					if (this.pbdate) {
						pbdate = this.pbdate
						pbtimes = this.pbtimes
					} else {
						pbdate = this.multiArray[0][this.multiIndex[0]]
						pbtimes = this.multiArray[1][this.multiIndex[1]]
					}
					var json = {
						jzrid: this.jzrid,
						name: this.name,
						mobile: this.mobile,
						persons: this.persons,
						// sex: this.array1[this.index1].name,
						// birthday: this.date,
						iemail: this.iemail,
						companyname: this.companyname,
						doctorid: this.doctorid,
						mendianid: this.row.shopid,
						date: pbdate,
						times: pbtimes,
						// cateid: this.cates[this.index3].id,
						desc: this.desc,
						// paytype: ""
					}
					console.log(json)
					API.post("common/yuyue", json).then((res) => {
						if (res.code == 1) {
							API.showModal(res.msg, "/pages/user/myyuyue/myyuyue")
						} else {
							$this.issend = true
							API.showToast(res.msg)
						}
					})
					console.log(this.row.price);
					return false;
					if (this.row.price > 0) {
						//#ifdef WEB
						json.paytype = "mp"
						uni.showModal({
							title: '提示',
							content: '确认要支付' + $this.row.price + "元？",
							success: function(res) {
								if (res.confirm) {
									API.post("common/yuyue", json).then((res) => {
										if (res.code == 1) {
											jweixin.config({
												debug: false,
												appId: res.data.appId, // 必填，公众号的唯一标识
												timestamp: res.data.timeStamp, // 必填，生成签名的时间戳
												nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
												signature: res.data.paySign, // 必填，签名
												jsApiList: ['chooseWXPay'], // 必填，需要使用的JS接口列表	
											});
											jweixin.ready(() => {
												jweixin.chooseWXPay({
													appId: res.data
														.appId, // 必填，公众号的唯一标识
													timestamp: res.data.timeStamp,
													nonceStr: res.data
														.nonceStr, // 支付签名随机串，不长于 32 位
													package: res.data
														.package, // 统一支付接口返回的prepay_id参数值
													signType: res.data
														.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
													paySign: res.data.paySign, // 支付签名
													success: function(res) { //支付成功回调
														API.showModal("支付成功",
															"/pages/user/myyuyue/myyuyue"
														)
													},
													cancel: function(res) {
														uni.showToast({
															title: '取消支付',
															icon: 'none',
															duration: 2000,
														})
													},
													fail: function(res) {
														console.log("fail", res);
														uni.showToast({
															title: '支付失败',
															icon: 'none',
															duration: 2000,
														})
													}
												});
											});
										} else {
											API.showModal(res.msg);
										}
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
						//#endif
						// #ifdef MP-WEIXIN
						json.paytype = "miniapp"
						uni.showModal({
							title: '提示',
							content: '确认要支付' + $this.row.price + "元？",
							success: function(res) {
								if (res.confirm) {
									API.post("common/yuyue", json).then((res) => {
										if (res.code == 1) {
											if (res.data.status == 0) {
												uni.requestPayment({
													'timeStamp': res.data.timeStamp,
													'nonceStr': res.data.nonceStr,
													'package': res.data.package,
													'signType': 'MD5',
													'paySign': res.data.paySign,
													'success': function(res) {
														API.showModal("支付成功",
															"/pages/user/myyuyue/myyuyue"
														)
													},
													'fail': function(res) {}
												})
											} else {
												API.showModal(res.msg, "/pages/user/myyuyue/myyuyue")

											}


										} else {
											API.showModal(res.msg);
										}
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
						// #endif
					} else {
						if (this.issend) {
							this.issend = false
							API.post("common/yuyue", json).then((res) => {
								if (res.code == 1) {
									API.showModal(res.msg, "/pages/user/myyuyue/myyuyue")
								} else {
									$this.issend = true
									API.showToast(res.msg)
								}
							})
						}
					}


				}
			},
			imobile(e) {
				this.mobile = e.detail.value
			},
			iemail(e) {
				this.email = e.detail.value
			},
			icompanyname(e) {
				this.companyname = e.detail.value
			},
			idesc(e) {
				this.desc = e.detail.value
			},
			ipersons(e) {
				this.persons = e.detail.value
			},
			iname(e) {
				this.name = e.detail.value
			},
			select() {
				uni.navigateTo({
					url: "/pages/user/jzradmin/jzradmin?fromjzr=1"
				})
			},
			bindPickerChange1: function(e) {
				console.log('picker发送选择改变，携带值为：' + e.detail.value)
				this.index1 = e.detail.value
			},
			bindPickerChange2: function(e) {
				console.log('picker发送选择改变，携带值为：' + e.detail.value)
				this.index2 = e.detail.value
			},
			bindPickerChange3: function(e) {
				console.log('picker发送选择改变，携带值为：' + e.detail.value)
				this.index3 = e.detail.value
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			bindMultiPickerColumnChange: function(e) {
				console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
				this.multiIndex[e.detail.column] = e.detail.value
				switch (e.detail.column) {
					case 0: //拖动第1列
						switch (this.multiIndex[0]) {
							case 0:
								this.multiArray[1] = ['上午', '下午']
								break
							case 1:
								this.multiArray[1] = ['上午', '下午']
								break
						}
						this.multiIndex.splice(1, 1, 0)
						break

				}
				this.$forceUpdate()
			},

		}
	}
</script>

<style lang="scss">
	page {
		background: #f7f7f7;
	}

	.tisbox {
		padding: 30rpx;
		color: #999;
		font-size: 26rpx;
	}
</style>